<mat-toolbar class="spaceBetweenCenter">
	<mat-form-field appearance="standard" class="searchField" style="width: 220px">
		<input
			#filter
			(keyup)="applyFilter(filter.value)"
			autocomplete="off"
			matInput
			placeholder="Filter relation">
		<button (click)="filter.value=''; applyFilter(filter.value)" *ngIf="filter.value" aria-label="Clear"
				mat-button mat-icon-button
				matSuffix>
			<span class="material-symbols-outlined notranslate">close</span>
		</button>
	</mat-form-field>
</mat-toolbar>

<ng-container
	*ngIf="selectedDatabase && selectedServer">

	<div class="scrollDiv mat-elevation-z8">
		<table [dataSource]="dataSource" class="table" mat-table multiTemplateDataRows>
			<ng-container
				*ngFor="let column of displayedColumns | keyvalue"
				[stickyEnd]="column.key === actionColum"
				matColumnDef="{{column.key}}"
			>
				<th *matHeaderCellDef mat-header-cell>
					{{ column.key === actionColum ? '' : column.value }}
				</th>
				<td *matCellDef="let row; let i = index" mat-cell>
					<ng-container *ngIf="column.key === actionColum">
					<span
						(click)="expanded.indexOf(row.id) >= 0 ? expanded.splice(expanded.indexOf(row.id)) : expanded.push(row.id)"
						class="material-symbols-outlined notranslate"
						style="cursor: pointer;">
						{{ expanded.indexOf(row.id) >= 0 ? 'expand_less' : 'expand_more' }}
					</span>
					</ng-container>

					<ng-container *ngIf="column.key !== actionColum">
						<ng-container *ngIf="column.key.startsWith('table_')">
							<a [routerLink]="['/' + selectedServer!.name, selectedDatabase!.name, row[column.key]]">
								{{ row[column.key] }}
							</a>
						</ng-container>
						<ng-container *ngIf="!column.key.startsWith('table_')">
							{{ row[column.key] }}
						</ng-container>
					</ng-container>
				</td>
			</ng-container>

			<ng-container matColumnDef="details">
				<td *matCellDef="let row" [attr.colspan]="Object.keys(displayedColumns).length" mat-cell>
					<div>
						<div>
							<span>Name</span><br>
							<span>On update</span><br>
							<span>On delete</span><br>
						</div>
						<div style="flex: 1;">
							<span>{{ row.name }}</span><br>
							<span>{{ row.update_rule }}</span><br>
							<span>{{ row.delete_rule }}</span><br>
						</div>
						<div>
							<button
								(click)="delete(row)"
								color="warn"
								mat-button>
								<span class="material-symbols-outlined notranslate">
									delete_forever
								</span>
								Remove
							</button>
						</div>
					</div>
				</td>
			</ng-container>

			<tr *matHeaderRowDef="Object.keys(displayedColumns); sticky: true" mat-header-row></tr>
			<tr *matRowDef="let row; columns: Object.keys(displayedColumns);" [class.expanded-row]="expanded.indexOf(row.id) >= 0"
				class="element-row"
				mat-row>
			</tr>
			<tr *matRowDef="let row; columns: ['details']" [class.expended]="expanded.indexOf(row.id) >= 0"
				class="details"
				mat-row></tr>

			<tr *matNoDataRow class="mat-row">
				<td class="mat-cell" colspan="100%">No Relations</td>
			</tr>
		</table>
	</div>

	<div *ngIf="isSQL()">
		<table class="new">
			<tr>
				<td><h3>Referencing</h3></td>
				<td>
					<mat-form-field appearance="fill">
						<mat-label>Table</mat-label>
						<mat-select #sourceTable
									[compareWith]="tableComparison">
							<mat-option *ngFor="let table of selectedDatabase?.tables" [value]="table">
								{{ table.name }}
							</mat-option>
						</mat-select>
					</mat-form-field>
				</td>
				<td>
					<mat-form-field [hidden]="!sourceTable.value" appearance="fill">
						<mat-label>Column</mat-label>
						<mat-select #sourceColumn>
							<ng-container *ngIf="sourceTable.value">
								<mat-option *ngFor="let column of sourceTable.value.columns" [value]="column.name">
									{{ column.name }} — {{ column.type }}
								</mat-option>
							</ng-container>
						</mat-select>
					</mat-form-field>
				</td>
				<td rowspan="3" style="text-align: center">
					<button
						(click)="add(sourceTable.value, sourceColumn.value, destTable.value, destColumn.value, update_rule.value, delete_row.value)"
						[disabled]="!sourceColumn.value || !destColumn.value || !update_rule.value || !delete_row.value"
						color="accent"
						mat-raised-button>
					<span class="material-symbols-outlined notranslate">
						attach_file_add
					</span>
						Relation
					</button>
				</td>
			</tr>
			<tr>
				<td><h3>Referenced</h3></td>
				<td>
					<mat-form-field appearance="fill">
						<mat-label>Table</mat-label>
						<mat-select #destTable
									[compareWith]="tableComparison">
							<mat-option *ngFor="let table of selectedDatabase?.tables"
										[value]="table">
								{{ table.name }}
							</mat-option>
						</mat-select>
					</mat-form-field>
				</td>
				<td>
					<mat-form-field [hidden]="!destTable.value" appearance="fill">
						<mat-label>Column</mat-label>
						<mat-select #destColumn>
							<ng-container *ngIf="destTable.value">
								<mat-option *ngFor="let column of destTable.value.columns"
											[value]="column.name">
									{{ column.name }} — {{ column.type }}
								</mat-option>
							</ng-container>
						</mat-select>
					</mat-form-field>
				</td>
				<td></td>
			</tr>
			<tr>
				<td><h3>Constraint</h3></td>
				<td>
					<mat-form-field appearance="outline">
						<mat-label>Delete</mat-label>
						<mat-select #delete_row [value]="constraints![0]">
							<mat-option *ngFor="let constraint of constraints" [value]="constraint">
								{{ constraint }}
							</mat-option>
						</mat-select>
					</mat-form-field>
				</td>
				<td>
					<mat-form-field appearance="outline">
						<mat-label>Update</mat-label>
						<mat-select #update_rule [value]="constraints![0]">
							<mat-option *ngFor="let constraint of constraints" [value]="constraint">
								{{ constraint }}
							</mat-option>
						</mat-select>
					</mat-form-field>
				</td>
				<td></td>
			</tr>
		</table>
	</div>
</ng-container>
